import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, history } from 'umi'
import { message, Button, Modal, Form, Input, Row, Col, Divider, Table } from 'antd'
import { getMenuEntityList, updateMenuInterface, deleteMenu, addMenuInterface } from '../service'


const TableList = (props) => {
  const [funcList, setFuncList] = useState([]);
  const [title, setTitle] = useState('');
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(null);
  const [loading, setLoading] = useState(false);
  const [selectionType, setSelectionType] = useState('radio');
  const [selectedMenuIds, setSelectedMenuIds] = useState([]);
  const [funcInfo, setFuncInfo] = useState({});

  const init = () => {
    getMenuEntityList('2').then(res => {
      setFuncList(res);
    });
  };

  useEffect(() => {
    init();
  }, []);

  const addMenu = (value) => {
    setTitle('添加功能');
    setVisible(true);
    setFuncInfo(value);
  };

  const updateMenu = (value) => {
    setTitle('编辑功能');
    setVisible(true);
    setFuncInfo(value);
    form.setFieldsValue(value);
  };

  const delMenu = (value) => {
    setLoading(true);
    deleteMenu(parseInt(value.menuId)).then(r => {
      if (r.flag){
        message.success(`删除功能成功。`);
      }else {
        message.error(`删除功能失败。`);
      }
      init();
      setLoading(false);
    })
  };

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedMenuIds(selectedRowKeys);
    }
  };

  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
  };

  const handleSubmit = (values) => {
    setLoading(true);
    setVisible(false);
    if (title === '添加功能'){
      let data = {
        // parentId: funcInfo.menuId,
        type: 2,
        ...values
      };
      addMenuInterface(data).then(r => {
        if (r.flag){
          message.success(`新增功能成功。`);
        }else {
          message.error(`新增功能失败。`);
        }
        init();
        setLoading(false);
      });
    }else if (title === '编辑功能'){
      let {children, ...data} = funcInfo;
      data.name = values.name;
      data.perms = values.perms;
      updateMenuInterface(data).then(r => {
        if (r.flag){
          message.success(`编辑功能成功。`);
        }else {
          message.error(`编辑功能失败。`);
        }
        init();
        setLoading(false);
      })
    }
    form.resetFields();
  };

  const columns = [
    {
      title: '功能名称',
      dataIndex: 'name',
      width: '20%'
    },
    {
      title: '参数配置',
      dataIndex: 'perms',
      width: '55%'
    },
    {
      title: '操作',
      hideInSearch: true,
      dataIndex: 'option',
      render: (item, record) => (
        <>
          {<a onClick={() => updateMenu(record)}>编辑</a>}
          {<Divider type="vertical" />}
          {<a onClick={() => delMenu(record)}>删除</a>}
        </>
      ),
    },
  ];


  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        loading={loading}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => addMenu()}>新建</Button>
        ]}
        dataSource={funcList}
      />

      <Modal
        maskClosable={false}
        title={title}
        visible={visible}
        footer={null}
        closable={false}
      >
        <Form
          form={form}
          // initialValues={}
          onFinish={handleSubmit}
        >
          <Form.Item name="name">
            <Input placeholder="功能名称" />
          </Form.Item>
          <Form.Item name="perms">
            <Input placeholder="功能参数配置" />
          </Form.Item>
          <Row justify='end' gutter={16}>
            <Col className="gutter-row" style={{paddingBottom: '20px'}}>
              <Button type="primary" onClick={handleCancel}>取消</Button>,
              <Button type="primary" htmlType="submit">保存</Button>
            </Col>
          </Row>
        </Form>
      </Modal>

    </PageHeaderWrapper>
  )
};

export default connect(({global}) => ({
  global
}))(TableList)
